<template>
  <chart-card :title="'平均能耗'" :extraType="'drop'" @changeDate="changeDate">
    <a-row type="flex" justify="space-around">
      <template v-for="(item, idx) in averageConsume">
        <Stastic-analysis :key="idx" :stasticData="item"> </Stastic-analysis>
      </template>
    </a-row>
  </chart-card>
</template>

<script>
import { StasticAnalysis, ChartCard } from "./components";
import { getAverageConsume } from "@/services/home";
export default {
  name: "AverageConsume",
  data() {
    return {
      averageConsume: [
        {
          label: "耗电量",
          num: 3675,
          rate: 1.35,
          growth: 2,
          unitMap: { key: "charging", unit: "kWh/100km" }
        },
        {
          label: "耗油量",
          num: 3075,
          rate: 0.0,
          growth: 1,
          unitMap: { key: "oil", unit: "L/100km" }
        }
      ],
      unitArr: [
        { key: "charging", unit: "kWh/100km" },
        { key: "oil", unit: "L/100km" }
      ]
    };
  },
  mounted() {
    // this.getAverageConsume();
  },
  components: {
    StasticAnalysis,
    ChartCard
  },
  props: {
    title: String,
    loading: Boolean,
    type: String
  },
  methods: {
    changeDate(val) {
      console.log(val);
    },
    async getAverageConsume() {
      const {
        data: { code, data }
      } = await getAverageConsume();
      if (code === 200) {
        this.averageConsume = data;
        this.averageConsume.forEach((o, i) => {
          o.unitMap = this.unitArr[i];
        });
      }
    }
  }
};
</script>

<style scoped lang="less">
</style>
